<template>
<div>
  <el-table
      :data="tableData"
      border
      style="width: 100%">
    <el-table-column
        prop="id"
        label="序号">
    </el-table-column>
    <el-table-column
        prop="opinion"
        label="意见">
    </el-table-column>
    <el-table-column label="反馈图片" align="center" prop="image" width="100">
      <template slot-scope="scope">
        <img :src="scope.row.image" :width="50" :height="50"/>
      </template>
    </el-table-column>
    <el-table-column
        prop="phone"
        label="手机号">
    </el-table-column>
    <el-table-column
        prop="status"
        label="状态">
      <template slot-scope="scope">
        <el-tag type="warning" v-if="scope.row.status == 1">未处理</el-tag>
        <el-tag type="success" v-else>已处理</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作"
        width="100">
      <template slot-scope="scope">
        <el-button @click="chakan(scope.row.id)" type="text" size="small">查看</el-button>
        <el-button @click="chuli(scope.row.id)"  type="text" size="small" v-if="scope.row.status == 1">处理</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog
      title="提示"
      :visible.sync="dialogVisible">
    意见：{{qing.opinion}}<br>
    图片：<img :src="qing.image" style="width: 280px;height: 280px;"><br><br><br>
    手机号：{{qing.phone}}<br><br>
    状态：{{qing.status == 1 ? '未处理' : '已处理'}}<br>
      </el-dialog>
</div>
</template>

<script>
import axios from "axios";

export default {
  data(){
    return{
      tableData: [],
      dialogVisible: false,
      qing:{},
    }
  },
  methods: {
    findPage() {
      axios.post(`http://localhost:6001/user/feedback/findList`).then(res => {
        this.tableData = res.data.data;
      })
    },
    chuli(id) {
        this.$confirm('确认处理该反馈,是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post(`http://localhost:6001/user/feedback/status?id=${id}`).then(res=>{
            if (res.data.code ==1){
              this.$message.success('处理成功');
              this.findPage();
            }else {
              this.$message.error('处理失败');
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'

        });
      });
    },
    chakan(id) {
      axios.post(`http://localhost:6001/user/feedback/find?id=${id}`).then(res=>{
        this.qing = res.data.data;
        this.dialogVisible = true;
      })
    }
  },
  created() {
    this.findPage();
  }
}
</script>

<style>

</style>
